<template>
    <view class="accept-page flex-col">
        <text class="text_2">实名信息验证授权</text>
        <text class="text_3">您授权遇见黄石：</text>
        <view class="paragraph_1">·接收“遇见黄石”传入的姓名、证件类型和证件号码。</view>
        <view class="paragraph_1">·将认证结果告知“遇见黄石”，用于实名办理业务。</view>

        <view class="image-text_1 flex-row justify-between">
            <u-checkbox-group>
                <u-checkbox v-model="isAgree" @change="handleChangeAgree"></u-checkbox>
            </u-checkbox-group>
            <view class="text-group_1">
                <text class="text_4">你已阅读并同意</text>
                <text class="text_5">《遇见黄石用户授权协议》</text>
            </view>
        </view>
        <view class="text-wrapper_1 flex-col" @click="handleAgree">
            <text class="text_6">授权</text>
        </view>
        <view class="text-wrapper_2 flex-col" @click="handleBack">
            <text class="text_7">不授权</text>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            isUpdate: false,
            isAgree: false
        }
    },
    onLoad(options) {
        this.isUpdate = options.isUpdate
    },
    methods: {
        handleChangeAgree(val) {
            this.isAgree = val
        },
        handleAgree() {
            console.log(this.isAgree, 'isAgree')
            if (this.isAgree) {
                uni.navigateTo({
                    url: `/subpage/meethuangshi/checkIdCard?isUpdate=${this.isUpdate}`
                });
            } else {
                uni.showToast({
                    title: '请先阅读并同意用户授权协议',
                    icon: 'none'
                });
            }
        },
        handleBack() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../static/style/common.css';

.accept-page {
    background-color: rgba(247, 246, 255, 1);
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 16px;
    box-sizing: border-box;

    .group_1 {
        margin: 0 27px 0 43px;

        .text_1 {
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 17px;
            font-family: SFPro-Semibold;
            font-weight: 600;
            text-align: right;
            white-space: nowrap;
            line-height: 22px;
        }

        .thumbnail_1 {
            width: 19px;
            height: 12px;
            margin: 5px 0 5px 182px;
        }

        .thumbnail_2 {
            width: 17px;
            height: 12px;
            margin: 5px 0 5px 8px;
        }

        .image_1 {
            width: 27px;
            height: 13px;
            margin: 5px 0 4px 7px;
        }
    }

    .image_2 {
        width: 384px;
        height: 46px;
        margin-top: 6px;
    }

    .text_2 {
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 18px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        text-align: right;
        white-space: nowrap;
        line-height: 25px;
        margin: 16px 117px 0 123px;
    }

    .text_3 {
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 16px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
        line-height: 22px;
        margin: 16px 0 0 0;
    }

    .paragraph_1 {
        overflow-wrap: break-word;
        color: rgba(52, 49, 79, 1);
        font-size: 14px;
        font-weight: normal;
        text-align: left;
        line-height: 20px;
        margin: 20px 0 0 0;
    }

    .thumbnail_3 {
        width: 16px;
        height: 16px;
        margin: 83px 352px 0 16px;
    }

    .image-text_1 {
        width: 254px;
        margin: 120px 114px 0 0;

        .thumbnail_4 {
            width: 16px;
            height: 16px;
        }

        .text-group_1 {
            width: 228px;
            height: 16px;
            overflow-wrap: break-word;
            font-size: 0;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 16px;

            .text_4 {
                overflow-wrap: break-word;
                color: rgba(52, 49, 79, 1);
                font-size: 12px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 16px;
            }

            .text_5 {
                overflow-wrap: break-word;
                color: rgba(0, 102, 253, 1);
                font-size: 12px;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 16px;
            }
        }
    }

    .text-wrapper_1 {
        width: 174px;
        height: 48px;
        margin: 28px auto 0;
        background: linear-gradient(173deg, #FFA5F5 0%, #319EFF 100%);
        border-radius: 20px;
        text-align: center;

        .text_6 {
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
            line-height: 48px;
        }
    }

    .text-wrapper_2 {
        width: 174px;
        height: 48px;
        margin: 16px auto 0;
        background: rgba(52, 49, 79, 0.06);
        border-radius: 20px;
        text-align: center;


        .text_7 {
            overflow-wrap: break-word;
            color: rgba(52, 49, 79, 1);
            font-size: 16px;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            white-space: nowrap;
            line-height: 48px;
        }
    }
}
</style>